<template>
  <div>
    <b-row>
      <b-col xl="2" style="border: 1px solid rgba(86,61,124,.2);">
        <b-row style="border-bottom: 1px solid rgba(86,61,124,.2);padding:10px">
          <b-container>
            目录
          </b-container>
        </b-row>
        <b-row style="padding:15px;background-color: #ffffff;height:100%">
          <!-- -->
          <LeftMenuTree v-on:selectionChange="onToView">
          </LeftMenuTree>
        </b-row>
      </b-col>
      <b-col style="border: 1px solid rgba(86,61,124,.2);">
        <b-row style="border-bottom: 1px solid rgba(86,61,124,.2);padding:10px">
          <b-container>
            操作
          </b-container>
        </b-row>
        <b-row style="padding:15px;background-color: #ffffff;height:100%">
          <div class="components">
            <transition mode="out-in" enter-active-class="fadeIn" leave-active-class="fadeOut" appear>
              <router-view class="animated"></router-view>
            </transition>
          </div>
        </b-row>
      </b-col>
    </b-row>
  </div>
</template>
<script>
import LeftMenuTree from "src/components/LeftMenuTree.vue";
// 故障大小类与预处理模型关联，主要是对模型进行关联
export default {
  name: "Keyword",
  components: {
    LeftMenuTree
  },
  data() {
    return {
      mainPath: "/manager/keyword/"
    };
  },
  methods: {
    onToView(items) {
      if (items instanceof Array) {
        console.log(this.mainPath + items[0].path);
        this.$router.push(this.mainPath + items[0].path);
      }
    }
  }
};
</script>
<style lang="scss">
.row {
  margin-right: 0px;
  margin-left: 0px;
}
.col,
.col-xl-2 {
  padding: 0px;
}
</style>
